<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>晨明网络</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <link rel="shortcut icon" href="{$Assets}assets/img/favicon.ico" />
    <!-- Loading Bootstrap -->
    <link rel="stylesheet" href="{$Assets}layui/css/layui.css">
    <script type="text/javascript" src="{$Assets}aikenjs/jquery.js"></script>
    <script src="{$Assets}aikenjs/Particleground.js" tppabs="{$Assets}aikenjs/Particleground.js"></script>


    <style type="text/css">
        body {
            height: 100%;
            background: #16a085;
            overflow: hidden;
        }
        html,body,.container{
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
        }
        .login-wrapper{
            height: 100%;
        }
        a {
            color:#fff;
        }
        .login-panel{margin-top:150px;}
        .login-screen {
            width: 300px;
            height: auto;
            overflow: hidden;
            margin: 10% auto 0 auto;
            padding: 40px;
            box-shadow: 0 -15px 30px #0d957a;
            border-radius: 5px;
        }
        .login-screen .well {
           
        }
        .login-screen .copyright {
            text-align: center;
        }
        @media(max-width:767px) {
            .login-screen {
                padding:0 20px;
            }
        }
        .profile-img-card {
            width: 100px;
            height: 100px;
            margin: 10px auto;
            display: block;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
        .profile-name-card {
            text-align: center;
        }

        #login-form {
            margin-top:20px;
        }
        #login-form .input-group {
            margin-bottom:15px;
        }
        input::-webkit-input-placeholder{
            color:#fff;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#fff;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#fff;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:#fff;
        }
        .login-form dt{
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            color: #45bda6;
            text-shadow: 0 0 1px #0e947a;
            margin-bottom: 15px;

        }
        .login-form dt strong{
            display: block;
        }
        .login-form dt em{
            display: block;
            font-size: 12px;
            margin-top: 8px;
        }
        .layui-form dd{
            margin:5px 0;
            height: 42px;
            /*overflow: hidden;*/
            position: relative;
        }
        .layui-form dd p{
                color: #53c6b0;
                font-size: 12px;
                text-align: center;
                margin: 5px 0;
        }
        .layui-form dd.user_icon:before{
            content:'u';
            position: absolute;
            top: 0px;
            left:15px; 
            height: 42px;
            line-height: 42px;
            color: #0c9076;
            font-size:20px; 
        }
        .layui-form dd.pwd_icon:before{
            content:'p';
            position: absolute;
            top: 0px;
            left:15px; 
            height: 42px;
            line-height: 42px;
            color: #0c9076;
            font-size:20px; 
        }


        .layui-form dd.pwd_icon2 input{
            padding: 8px;
            width: 150px;
            text-indent: 0px;
            text-align: center;
        }
        .layui-form dd.pwd_icon2 img{
            cursor: pointer;
        }




        
        .layui-form  dd .login_txtbx{
            font-size: 14px;
            height: 26px;
            line-height: 26px;
            padding: 8px 5%;
            width: 90%;
            text-indent: 2em;
            border: none;
            background: #5cbdaa;
            color: #fff;
        }
        .kuang{
            
            margin:0 auto;
        }

    </style>
    <script>
$(document).ready(function() {
  //
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
  //
  createCode();
  //
  $(".submit_btn").click(function(){
      location.href="javascrpt:;"/*tpa=http://***index.html*/;
      });
});
</script>

</head>
<body>

<div class="container">
    <div class="login-wrapper">
        <div class="login-screen">
            <div class="well">
                <div class="login-form" >
                    <dt>
                        <strong>晨明网络</strong>
                        <em>cmtime.cn</em>
                    </dt>

                    <form  id="login-form" class="layui-form kuang">
                        <dd class="user_icon">
                            <input type="text" placeholder="" class="login_txtbx" name="username" lay-verify="username" autocomplete="off">
                        </dd>
                        <dd class="pwd_icon">
                            <input type="password" placeholder="" class="login_txtbx" name="password" lay-verify="password" autocomplete="off" >
                        </dd>
                        <dd class="pwd_icon2">
                            <input type="text" name="captcha" placeholder="" data-validate="required" class="login_txtbx"  style="text-transform:uppercase"/>  
                            <img src="{:url('login/show_captcha')}" alt="" width="130" height="42" class="passcode" onclick="this.src=this.src+'?'"/>  
                        </dd>
                        <dd>
                            <button class="layui-btn" lay-submit="" lay-filter="demo1" style="width: 100%;background-color: #048f74">登陆</button>
                        </dd>

                        <dd>
                            <p>360FireFoxChromeSafariOpera IE8/p>
                        </dd>

                       


                    </form>
                </div>
            </div>
           
        </div>
    </div>
</div>
<script src="{$Assets}layui/layui.js"></script>

<script>
    function refreshVerify() {
        var ts = Date.parse(new Date())/1000;
        var img = document.getElementById('verify_img');
        img.src = "/vendor/captcha/captcha?id="+ts;
    }
</script>


<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        form.on('submit(demo1)', function(data){


            dusername=data.field.username;
            dpassword=data.field.password;
            captcha=data.field.captcha;
            //alert(dpassword);

            $.ajax({
                type:"POST",
                url: "checklogin",
                data:{username:dusername,password:dpassword,captcha:captcha},
                dataType:"json",

                success:function(datas){
                    if(datas=='1'){
                        layer.msg('登陆成功!');
                        setTimeout(function(){  //  setTimeout2000
                            self.location='/index.php/admin/index/index.html';
                        },500);
                    }else if(datas=='0'){
                        layer.msg('用户不存在!');
                    }else if(datas=='-1'){
                        layer.msg('密码错误！');
                    }else if(datas=='-2'){
                        layer.msg('请填写完整!');
                    }else if(datas=='99'){
                        layer.msg('提交方式错误！请重新提交。');
                    }else if(datas=='10'){
                        layer.msg('验证码错误！');
                    }
                    /*
                    //layer.close(index);
                    //alert(datas);
                    layer.msg(');
                    setTimeout(function(){  //  setTimeout2000
                        window.location.reload();//
                    },1000);
                    */
                }
            });
            return false;
        });


    });
</script>

</body>
</html>